<template>
  <div>
    <!-- 登录注册 -->
    <div class="header">
      <div class="center bg">
        <span>玫瑰与时光 让玫瑰装饰你的生活</span>
        <ul>
          <template v-if="user == null">
            <li>
              <router-link to="/login" title="用户登录">登录</router-link>
            </li>
            <li>
              <router-link to="/register" title="注册新用户">注册</router-link>
            </li>
          </template>
          <template v-else>
            <li>
              <a id="uname"
                >欢迎<span>{{ user.unames }}</span></a
              >
            </li>
            <li><a @click="updateUser(null)">退出</a></li>
          </template>
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </div>
    </div>
    <!-- 头部搜索 -->
    <div class="search center">
      <router-link to="/"
        ><img src="../assets/img/logo.png" alt="rose_logo" class="logo"
      /></router-link>
      <div>
        <input
          @keyup.enter="goProduct"
          type="text"
          v-model="keyWord"
          placeholder="搜索"
        />
        <img
          @click="goProduct"
          src="../assets/img/rose_goods/search.png"
          alt="搜索"
        />
      </div>
    </div>
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="center">
        <div>
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/all">全部玫瑰</router-link></li>
            <li><a href="#">永生花</a></li>
            <li><a href="#">玫瑰与家</a></li>
            <li><a href="#">玫瑰团购</a></li>
            <template v-if="user">
              <li><a href="#">购物车</a></li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex"
export default {
  data() {
    return {
      keyWord: "",
    }
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    ...mapMutations(["updateUser"]),
    goProduct() {
      console.log(this.$route)
      const path = "/products/" + this.keyWord
      if (this.$route.path == path) return
      this.$router.push(path)
    },
  },
}
</script>

<style lang="scss" scoped></style>
